<!--
 * @轮子的作者: 轮子哥
 * @Date: 2023-12-08 16:01:33
 * @LastEditTime: 2023-12-15 15:25:51
-->
<template>
    <div class="rightMain">
        <div class="title" v-if="!nextItemClick">{{ title }}</div>

        <div class="ss1" v-if="!nextItemClick">
            <!--应收科目-->
            <div class="ss2">{{ $t('text.System.a2') }}</div>
            <div class="ss3">
                <div class="ss4" @click="next(1)">
                    <div class="ss6">{{ $t('text.System.a3') }}</div>
                    <div class="ss7">></div>
                </div>
                <div class="ss4" @click="next(2)">
                    <div class="ss6">{{ $t('text.System.a4') }}</div>
                    <div class="ss7">></div>
                </div>
                <div class="ss4" @click="next(3)">
                    <div class="ss6">{{ $t('text.System.a5') }}</div>
                    <div class="ss7">></div>
                </div>
            </div>

            <!--实收管理-->
            <div class="ss2">{{ $t('text.System.a6') }}</div>
            <div class="ss5">{{ $t('text.System.a7') }}</div>
            <div class="ss3">
                <div class="ss4">
                    <div class="ss6">{{ $t('text.System.a8') }}</div>
                    <div class="ss7" v-if="isLoad">
                        <CommonSelect :myStyles="{ border: 'none', width: 'auto' }"
                            @returnData="returnData($event, prem.contractMeritShareMode)"
                            :dataList="[{ title: $t('text.System.a17'), value: 0 }, { title: $t('text.System.a18'), value: 1 }]"
                            keys="title" :default="selectDefault">
                        </CommonSelect>
                    </div>
                </div>
            </div>

            <!--签约喜报-->
            <div class="ss2">{{ $t('text.System.a9') }}</div>
            <div class="ss5">{{ $t('text.System.a10') }}</div>
            <div class="ss3" v-if="isLoad">
                <div class="ss4">
                    <div class="ss6">{{ $t('text.System.a11') }}</div>
                    <div class="ss7">
                        <el-switch v-model="prem.sellSignReport.optionValue" :loading="prem.sellSignReport.loading"
                            @click="beforeChange(prem.sellSignReport)" active-value="1" inactive-value="0" />
                    </div>
                </div>
                <div class="ss4">
                    <div class="ss6">{{ $t('text.System.a12') }}</div>
                    <div class="ss7">
                        <el-switch v-model="prem.rentSignReport.optionValue" :loading="prem.rentSignReport.loading"
                            @click="beforeChange(prem.rentSignReport)" active-value="1" inactive-value="0" />
                    </div>
                </div>
                <div class="ss4">
                    <div class="ss6">{{ $t('text.System.a13') }}</div>
                    <div class="ss7">
                        <el-switch v-model="prem.newSignReport.optionValue" :loading="prem.newSignReport.loading"
                            @click="beforeChange(prem.newSignReport)" active-value="1" inactive-value="0" />
                    </div>
                </div>
            </div>

            <!--租房到期提醒-->
            <div class="ss2">{{ $t('text.System.a14') }}</div>
            <div class="ss5">{{ $t('text.System.a15') }}</div>
            <div class="ss3">
                <div class="ss4">
                    <div class="ss6">{{ $t('text.System.a16') }}</div>
                    <div class="ss7" v-if="isLoad">
                        <CommonInput @blurReturn="blurReturn($event, prem.rentPriToPubDaysCustomer)" :isNumber="2"
                            :value="prem.rentPriToPubDaysCustomer.optionValue"
                            :inputStyle="{ border: 'none', textAlign: 'right', height: 'auto', paddingRight: '10px' }"
                            :forceReset="forceReset">
                        </CommonInput>
                        {{ $t('text.System.l6') }}
                    </div>
                </div>
            </div>
        </div>


        <div class="title2" v-if="nextItemClick">
            <div @click="toBack" class="backDiv">
                <img class="backImg" src="../../assets/images/back.svg">
                <div style="padding-top: 2px;">{{ $t('text.System.l25') }}</div>
            </div>
            <div style="flex: 1;">
                {{ nextItemIndex == 1 ? $t('text.System.a3') : '' }}
                {{ nextItemIndex == 2 ? $t('text.System.a4') : '' }}
                {{ nextItemIndex == 3 ? $t('text.System.a5') : '' }}
            </div>
            <div style="flex: 1;"></div>
        </div>
        <div class="ss1" v-if="nextItemClick">
            <div class="ss3" v-for="item in subjectList" :key="item">
                <div class="ss4">
                    <div class="ss6">{{ item.name }}</div>
                    <DialogLayout67 :params="item" isEdit @returnData="refreshSubject">
                        <div class="ss7">
                            {{ item.shareMethod == '0' ? $t('text.System.a24') : $t('text.System.a23') }}
                            &emsp;
                            <img src="../../assets/images/h40.svg" width="15" height="15" />
                        </div>
                    </DialogLayout67>
                </div>

                <div class="ss8" v-if="item.costs && item.costs.length > 0">
                    <div class="ss9">
                        <div class="ss10 fw">{{ $t('text.System.a25') }}</div>
                        <div class="ss10 fw">{{ $t('text.System.a26') }}</div>
                        <div class="ss10 fw">{{ $t('text.System.a27') }}</div>
                        <div class="ss10 fw" style="text-align: center;">{{ $t('text.System.a28') }}</div>
                    </div>
                    <div v-for="child in item.costs" :key="child" class="ss9">
                        <div class="ss10">{{ child.name }}</div>
                        <div class="ss10">
                            {{ child.mode == '0' ? $t('text.System.a29') : '' }}
                            {{ child.mode == '1' ? $t('text.System.a30') : '' }}
                        </div>
                        <div class="ss10">
                            {{ child.cost }}
                            {{ child.mode == '0' ? '%' : '' }}
                            {{ child.mode == '1' ? 'AED' : '' }}
                        </div>
                        <div class="ss10">
                            <div class="ss11">
                                <DialogLayout68 @returnData="refreshSubject" isEdit :params="{ subjectId: item.id,...child }">
                                    <div class="ss12">编辑</div>
                                </DialogLayout68>
                                <DialogLayout70 :id="child.id" :name="child.name"><div class="ss13">删除</div></DialogLayout70>
                            </div>
                        </div>
                    </div>
                </div>

                <DialogLayout68 @returnData="refreshSubject" :params="{ subjectId: item.id }">
                    <div style="display: flex;align-items: center;justify-content: center;padding-top: 5px;color: #6698ff;background: #f2f2f2;padding-bottom: 7px;">
                        <img src="../../assets/images/add2.svg" width="15" height="15" />
                        <div style="padding-left: 4px;"> {{ $t('text.System.a33') }}</div>
                    </div>
                </DialogLayout68>

            </div>


            <!--新增科目-->
            <div class="ss3">
                <DialogLayout67 @returnData="refreshSubject" :params="{ type: nextItemIndex - 1 }">
                    <div style="display: flex;align-items: center;justify-content: center;">
                        <img src="../../assets/images/add2.svg" width="15" height="15" />
                        <div style="padding-left: 4px;"> {{ $t('text.System.a19') }}</div>
                    </div>
                </DialogLayout67>
            </div>

        </div>
    </div>
</template>
  
<script>
import CommonInput from '@/components/input/CommonInput.vue';
import CommonSelect from '@/components/input/CommonSelect.vue';
import { findAllOptions, updateOptions, subjectFindListType } from "@/http/api";
import { ElMessage } from 'element-plus'

export default {
    name: "SystemContract",
    components: {
        CommonInput,
        CommonSelect
    },
    props: {
        title: String
    },
    data() {
        return {
            prem: {},
            isLoad: false,
            forceReset: true,
            setter: false,
            nextItemClick: false,
            nextItemIndex: -1,
            subjectList: []
        }
    },
    created() {
    },
    mounted() {
        findAllOptions().then(res => {
            if (res !== undefined) {
                this.prem = res
                this.isLoad = true
            }
        })
    },
    methods: {
        beforeChange(item) {
            item.loading = true
            updateOptions({ [item.optionCode]: Number(item.optionValue) ? 1 : 0 }).then(res => {
                if (res !== undefined) {
                    ElMessage.success(this.$t('text.System.l37'))
                } else {
                    item.optionValue = !item.optionValue
                }
                item.loading = false
            }).catch(() => {
                item.loading = false
                item.optionValue = !item.optionValue
            })
        },
        blurReturn(value, item) {
            if (value == item.optionValue || !String(value)?.trim()) {
                this.forceReset = !this.forceReset
                return
            }
            updateOptions({ [item.optionCode]: value }).then(res => {
                if (res !== undefined) {
                    ElMessage.success(this.$t('text.System.l37'))
                    item.optionValue = value
                } else {
                    this.forceReset = !this.forceReset
                }
            }).catch(() => {
                this.forceReset = !this.forceReset
            })
        },
        returnData(obj, item) {
            if (obj.value != item.optionValue)
                updateOptions({ [item.optionCode]: obj.value }).then(res => {
                    if (res !== undefined) {
                        ElMessage.success(this.$t('text.System.l37'))
                        item.optionValue = obj.value
                    } else {
                        if (obj.value == '1') {
                            item.optionValue = '0'
                        } else {
                            item.optionValue = '1'
                        }
                        this.setter = !this.setter
                    }
                }).catch(() => {
                    if (obj.value == '1') {
                        item.optionValue = '0'
                    } else {
                        item.optionValue = '1'
                    }
                    this.setter = !this.setter
                })
        },
        next(index) {
            this.nextItemClick = !this.nextItemClick
            this.nextItemIndex = index
            this.refreshSubject()
        },
        refreshSubject() {
            subjectFindListType({ type: this.nextItemIndex - 1 }).then(res => {
                if (res !== undefined) {
                    this.subjectList = res
                }
            })
        },
        toBack() {
            this.nextItemClick = !this.nextItemClick
        }
    },
    watch: {},
    computed: {
        selectDefault() {
            let temp = this.setter ? '' : ' '
            return this.prem.contractMeritShareMode.optionValue == '0' ? this.$t('text.System.a17') + temp : this.prem.contractMeritShareMode.optionValue == '1' ? this.$t('text.System.a18') + temp : '' + temp
        }
    }

}
</script>
<style scoped>
.title {
    background: #f2f2f2;
    color: gray;
    height: 40px;
    line-height: 40px;
}

.rightMain {
    width: 100%;
    margin: 10px 15px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    margin-right: 20px;
}

.ss1 {
    display: flex;
    padding: 7px 10px;
    color: gray;
    font-size: 12px;
    flex-direction: column;
    min-width: 300px;
    padding: 30px 100px;
    overflow: auto;
    height: 100%;
}

.ss2 {
    text-align: left;
    color: #444;
    padding: 7px 0px;
    font-size: 13px;
}

.ss3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #eee;
    padding: 7px 10px;
    color: gray;
    font-size: 12px;
    margin-bottom: 15px;
}

.ss4 {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 7px 10px;
    color: gray;
    font-size: 12px;
}

.ss5 {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
    padding: 7px 0px;
    color: gray;
    font-size: 12px;
    word-break: break-all;
    text-align: left;
}

.ss7 {
    display: flex;
    align-items: center;
}

.ss8 {
    padding: 5px 0 0px 0;
    background: #f2f2f2;
}

.ss9 {
    display: flex;
    height: 25px;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 5px;
}

.ss10 {
    text-align: left;
    padding-left: 10px;
    padding-top: 7px;
    padding-bottom: -14px;
    flex: 1;
}

.ss11 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ss12 {
    color: #6698ff;
    font-weight: bold;
    padding-right: 30px;
}

.ss13 {
    color: #ec909b;
    font-weight: bold;
}

.fw {
    font-weight: 600;
    flex: 1;
}

.title2 {
    background: #f2f2f2;
    color: gray;
    height: 40px;
    line-height: 40px;
    display: flex;
}

.backDiv {
    display: flex;
    flex: 1 1 0%;
    color: #6698ff;
    font-size: 13px;
    align-items: center;
    padding-left: 20px;
}

.backImg {
    width: 23px;
    height: 23px;
    padding-right: 5px;
}
</style>
    